<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小说搜索页</title>
    <script rel="stylesheet" src="/js/jquery.js"></script>
    <script rel="stylesheet" src="/js/modal.js"></script>
    <script rel="stylesheet" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/font/bootstrap-icons.css}">
    <style type="text/css">
        #searchBox{
            width: 80%;
            margin: auto;
        }
        #searchBox a{
            color:black;
        }
        #searchBox a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="searchBox">

    <!--导航栏-->
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <h4 class="navbar-nav mr-auto" style="font-weight: bold;padding-right: 10px;">
                    <a th:href="'/user/index'"><i class="bi bi-book"></i>&nbsp; 茄子小说网</a>
                </h4>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li th:each="types, iterStat : ${typeList}" class="nav-item">
                            <a th:href="'/user/toMain?typeId='+${types.typeId}+'&typeName='+${types.typeName}"
                               th:text="${types.typeName}" target="myIframe" class="nav-link"></a>
                        </li>
                    </ul>

                    <ul class="nav justify-content-end" th:if="${session.user==null}">
                        <li class="nav-item">
                            <a id="loginModel" type="button" class="btn" onclick="loginModelShow()">登录</a>
                        </li>
                        <li class="nav-item">
                            <a type="button" class="btn" onclick="registerModelShow()">注册</a>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                    </ul>
                    <ul class="nav justify-content-end" th:if="${session.user!=null}">
                        <li class="nav-item">
                            <a class="nav-link" th:text="'欢迎您  '+${session.user.getUsername()}">xx</a>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                        <li class="nav-item"><a class="nav-link" th:href="'/user/exit'">退出</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <!--搜索框-->
    <div class="row">
        <div class="col-md-12" style="height: 100px">
            <form class="form-inline" style="padding-left: 10px;padding-top: 30px;">
                <div class="form-group ">
                    <input type="text" class="form-control" id="inputFictionName" placeholder="修真聊天群"
                           style="width: 500px">
                </div>
                <button id="searchFictionButton" onclick="searchFiction()" type="button" class="btn btn-outline-info">
                    <i class="bi bi-search"></i>
                    搜索
                </button>
            </form>
        </div>
    </div>

    <!--分类-->
    <div class="row">
        <!--动态sql查找-->
        <div class="col-md-9">
            <br>
            <div class="row">
                <div class="col-md-1">分类</div>
                <div class="col-md-8">
                    <ul class="list-inline" th:each="types : ${typeList}" style="float: left; margin-left: 10px;">
                        <li class="list-inline-item" th:text="${types.typeName}"></li>
                    </ul>
                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="row">
                <div class="col-md-1">状态</div>
                <div class="col-md-8">
                    <ul class="list-inline">
                        <li class="list-inline-item">连载</li>
                        <li class="list-inline-item">完结</li>
                    </ul>
                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="row">
                <div class="col-md-1">字数</div>
                <div class="col-md-8">
                    <ul class="list-inline">
                        <li class="list-inline-item">30万字以下</li>
                        <li class="list-inline-item">30-50万字</li>
                        <li class="list-inline-item">50-100万字</li>
                        <li class="list-inline-item">100-200万字</li>
                        <li class="list-inline-item">200万字以上</li>
                    </ul>
                </div>
                <div class="col-md-3"></div>
            </div>
            <!--书籍展示-->
            <div class="row" th:each="searchFictionVo : ${searchFictionVoList}">
                <div class="col-sm-2" style="margin-bottom: 10px;margin-top: 10px;">
                    <a th:href="'/user/toFictionDetails?fictionId='+${searchFictionVo.fictionId}+'&userId=null'">
                        <img class="shadow-sm bg-white rounded" style="width: 156px;height: 202px;margin-left: 20px;" th:src="@{${searchFictionVo.coverPath}}">
                    </a>
                </div>
                <div class="col-sm-8" style="margin-top: 10px;">
                    <div class="row"  style="margin-left: 10px;">
                        <div class="col-sm-12" th:if="${session.user==null}">
                            <h5>
                                <a th:href="'/user/toFictionDetails?fictionId='+${searchFictionVo.fictionId}+'&userId=null'" th:text="${searchFictionVo.fictionName}">name</a>
                            </h5>
                        </div>
                        <div class="col-sm-12" th:if="${session.user!=null}">
                            <h5>
                                <a th:href="'/user/toFictionDetails?fictionId='+${searchFictionVo.fictionId}+'&userId='+${session.user.getUserId()}" th:text="${searchFictionVo.fictionName}">name</a>
                            </h5>
                        </div>
                    </div>
                    <div class="row"  style="margin-left: 10px;">
                        <div class="col-sm-12">
                            <p th:text="'作者：'+${searchFictionVo.authorName}+' '
                    +${searchFictionVo.authorDescription}+' . '
                    +${searchFictionVo.wordCount}+'万字'+' . '
                    +${searchFictionVo.fictionState}"></p>
                        </div>
                    </div>
                    <div class="row"  style="margin-left: 10px;">
                        <div class="col-sm-12">
                            <p th:text="${#strings.substring(searchFictionVo.fictionDescription, 0, 76)}"></p>
                        </div>
                    </div>
                    <div class="row"  style="margin-left: 10px;">
                        <div class="col-sm-12">
                            <p>
                                最新章节&nbsp;&nbsp;
                                <a th:text="${searchFictionVo.newContent}"
                                                       th:href="'/user/toContentsShow?contentId='+${searchFictionVo.contentId}+'&chapterTitle='+${searchFictionVo.newContent}"></a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <ul class="list-inline" style="display: flex;flex-direction: column;justify-content: center;margin-top: 10px;">
                        <li class="list-inline-item" style="margin-bottom: 10px;" th:if="${session.user == null}">
                           <a th:href="'/user/toFictionDetails?fictionId='+${searchFictionVo.fictionId}+'&userId=null'">
                               <button type="button" class="btn btn-outline-primary">查看详情</button>
                           </a>
                        </li>
                        <li class="list-inline-item" style="margin-bottom: 10px;" th:if="${session.user != null}">
                            <a th:href="'/user/toFictionDetails?fictionId='+${searchFictionVo.fictionId}+'&userId='+${session.user.getUserId()}">
                                <button type="button" class="btn btn-outline-primary">查看详情</button>
                            </a>
                        </li>
                        <li class="list-inline-item"  style="margin-bottom: 10px;"> <button type="button" class="btn btn-outline-primary">开始阅读</button> </li>
                        <li class="list-inline-item"> <button type="button" class="btn btn-outline-primary">点击收藏</button> </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--本周推荐-->
        <div class="col-md-3">
            <br>
            <h5 class="row">本周强推</h5>
            <hr/>
            <div class="row" th:each="fictions , iterStat:${fictionList}"
                 th:if="${iterStat.count} &gt; 0 and ${iterStat.count} &lt;= 10" style="margin-bottom: 10px;">
                <div class="col-md-4">
                    <a href="#">
                        <img class="shadow-sm bg-white rounded" style="width: 100px;height: 145px;" th:src="@{${fictions.coverPath}}">
                    </a>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-12"><h4><a href="#" th:text="${fictions.fictionName}">name</a></h4></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><h6
                                th:text="${#strings.substring(fictions.fictionDescription, 0, 48)}"></h6></div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <h6>
                                <button class="btn btn-default" th:text="${fictions.wordCount}+万"></button>
                            </h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr/>
    <div class="row">
        <div class="col-md-12" style="text-align: center">
            <div th:include="common/footer :: footer"></div>
        </div>
    </div>

</div>

</body>
</html>